<template>
	<view class="mine-content">
		<view class="panel">
			<image src="../../assets/mine/aver.png" mode="widthFix"></image>
			<view class="banner">
				<view class="name">
					1111
				</view>
				<view class="username">
					账号：13908068765
				</view>
			</view>
		</view>

		<view class="section">
			<view class="list">
				<view class="label">
					<image src="../../assets/mine/aver.png" mode="widthFix"></image>
					车牌号
				</view>
				<view class="enter">
					<input type="text" />
				</view>
			</view>
			<view class="list">
				<view class="label">
					<image src="../../assets/mine/aver.png" mode="widthFix"></image>
					车牌号
				</view>
				<view class="enter">
					<input type="text" />
				</view>
			</view>
			<view class="list">
				<view class="label">
					<image src="../../assets/mine/aver.png" mode="widthFix"></image>
					车牌号
				</view>
				<view class="enter">
					<input type="text" />
				</view>
			</view>
		</view>

		<view class="upload">
			<view class="label">
				<view class="line"></view>驾驶证
			</view>
			<div class="img-list">
				<view class="list">
					<my-upload></my-upload>
				</view>
			</div>
		</view>
		<view class="upload">
			<view class="label">
				<view class="line"></view>身份证正反面
				<view class="num">1/2</view>
			</view>
			<div class="img-list">
				<view class="list">
					<my-upload></my-upload>
				</view>
				<view class="list">
					<my-upload></my-upload>
				</view>
			</div>
		</view>
		<view class="upload">
			<view class="label">
				<view class="line"></view>行驶证正副本
				<view class="num">1/2</view>
			</view>
			<div class="img-list">
				<view class="list">
					<my-upload></my-upload>
				</view>
				<view class="list">
					<my-upload></my-upload>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.mine-content {
		height: 100%;
		padding: 0 28rpx;
		overflow-y: auto;
		
		
		.panel{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			z-index: 10;
			margin: 56rpx 0 26rpx 0;
			
			image{
				width: 120rpx;
			}
			
			.banner{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				margin-left: 24rpx;
				
				.name{
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-bottom: 4rpx;
				}
				
				.username{
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
		
		.section{
			position: relative;
			z-index: 10;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 0 8rpx;
			
			.list{
				height: 104rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F8F8F8;
				
				.label{
					display: flex;
					align-items: center;
				}
				
				image{
					width: 40rpx;
				}
				
				.enter{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					text-align: right;
					font-style: normal;
					text-transform: none;
				}
			}
		}
		
		.upload{
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #121212;
			font-style: normal;
			text-transform: none;
			margin-top: 24rpx;
			padding: 20rpx 30rpx;
			
			.label{
				display: flex;
				align-items: center;
				position: relative;
				
				.num{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
					font-style: normal;
					text-transform: none;
					position: absolute;
					top: 50%;
					right:0;
					transform: translateY(-50%);
				}
				
				.line{
					width: 4rpx;
					height: 30rpx;
					background: #3F4DD4;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					margin-right: 12rpx;
				}
			}
			
			.img-list{
				display: flex;
				align-items: center;
				margin-top: 16rpx;
				
				.list{
					width: 168rpx;
					height: 168rpx;
					
					&+.list{
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>